<template>
	<view class="content">
		<view class="Traceability-bg">
			<image src="../../static/bgimg/home-bg.png" mode="widthFix"></image>
		</view>
		<!-- 自定义导航栏 -->
		<view class="Traceability-item" :style="{'padding-top': statusBarHeight + 'px'}">
			<view class="Traceability-nav">
				<view class="nav-left" @click="goBack">
					<uv-icon name="arrow-left" size="20px" color="#fff"></uv-icon>
				</view>
				<view class="nav-center size-18 color-ff">收藏溯源</view>
			</view>
			<scroll-view scroll-y="true" class="scrollView">
				<view class="scan-item">

					<view class="scan-box border-10 ">
						<view class="scan-input">
							<view class="size-14 color-32">证书编码</view>
							<view class=""><uv-input placeholder="请输入证书编码" border="" v-model="value"></uv-input>
							</view>
							<view class="queryBtn">查询</view>
						</view>
						<view class="scan-img">
							<image src="../../static/icon/扫描.png" mode="widthFix" @click="scanQRCode"></image>
							<view class="color-666 blod size-14">
								扫码快速获证书信息
							</view>
						</view>
						<view class="sign">
							<view class="sign-item" v-for="item in signList">
								<view class="sign-img">
									<image :src="item.imgSrc" mode="widthFix"></image>
								</view>
								<view class="size-14 color-999">{{item.title}}</view>
							</view>
						</view>
					</view>
					<!-- 证书信息 -->
					<view class="certificateInfo">
						<view class="size-16  color-333 size-bold">证书信息</view>
						<view class="">
							<view class="m-t-10 " v-for="item in 8">
								<view class="color-666 size-14 ">证书信息：和田玉手串</view>
							</view>
						</view>
						<view class="Info-btn">
							<view class="look-btn">查看证书</view>
							<view class="download-btn">下载证书</view>
						</view>
					</view>
					<!-- 溯源信息 -->
					<view class="certificateInfo" style="margin-bottom: 30rpx;">
						<view class="size-16  color-333 size-bold">溯源信息</view>
						<view class="color-666 size-14 " style="text-indent: 2em;" v-for="item in 3">
							和田玉，因其主要产自中国新疆维吾尔自治区和田地区而得名，是中国传统的玉石之一。它的历史可以追溯到新石器时代晚期，有着数干年的使用和赏玩历史。在中国文化中，和田玉一直被视为美好、吉祥的象征，并享有“玉石之王”的美誉。
						</view>
					</view>


				</view>
			</scroll-view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				navBarHeight: 44,
				menuButtonInfo: null,
				value: '',
				signList: [{
					title: '一物一码',
					imgSrc: '../../static/icon/icon-zp.png'
				}, {
					title: '扫码验真',
					imgSrc: '../../static/icon/icon-yz.png'
				}, {
					title: '拒绝假货',
					imgSrc: '../../static/icon/icon-z.png'
				}, ]
			};
		},
		onLoad() {
			// 获取系统信息（状态栏、胶囊按钮位置）
			const systemInfo = uni.getSystemInfoSync();
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect(); 

			this.statusBarHeight = systemInfo.statusBarHeight || 0;
			this.menuButtonInfo = menuButtonInfo;
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			scanQRCode() {
				wx.scanCode({
					onlyFromCamera: false, // 允许从相册选择图片
					scanType: ['qrCode', 'barCode'],
					success: (res) => {
						this.setData({
							scanResult: res.result
						})
						wx.showModal({
							title: '扫码成功',
							content: res.result,
							showCancel: false
						})
					},
					fail: (err) => {
						wx.showToast({
							title: '扫码失败',
							icon: 'none'
						})
					}
				})
			}
		}
	};
</script>
<style lang="less">
	

	.Traceability-bg {
		width: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.Traceability-item {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background: transparent;

		.Traceability-nav {
			height: 44px;
			display: flex;
			align-items: center;
			position: relative;

			.nav-left {
				position: absolute;
				left: 15px;
				z-index: 1;
			}

			.nav-center {
				position: absolute;
				left: 0;
				right: 0;
				text-align: center;
				font-size: 18px;
				color: #fff;
				margin: 0 auto;
				width: fit-content;
			}
		}

		.scrollView {
			height: calc(90vh - env(safe-area-inset-bottom));

		}


		.scan-item {
			margin-top: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 30rpx;

			.scan-box {
				width: 90%;
				padding: 30rpx;
				box-sizing: border-box;
				background-color: #fff;

				.scan-input {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 1px solid #32b9b4;
					border-radius: 20rpx;
					height: 80rpx;
					position: relative;

					.input-content {
						flex: 1;
						padding: 0 20rpx;
					}

					.color-32 {
						margin-left: 20rpx;
						position: relative;

						&::before {
							content: "";
							display: block;
							width: 1rpx;
							height: 80%;
							background-color: #32b9b4;
							position: absolute;
							right: -20rpx;
							top: 10%;
						}
					}

					.queryBtn {
						flex-shrink: 0;
						width: 120rpx;
						height: 100%;
						background-color: #32b9b4;
						color: white;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 0 20rpx 20rpx 0;
					}
				}

				.scan-img {
					width: 100%;
					padding: 30rpx 0rpx;
					display: flex;
					gap: 20rpx;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					image {
						width: 40%;
					}

				}

				.sign {

					display: flex;
					justify-content: center;
					align-items: center;
					gap: 30rpx;

					.sign-item {
						display: flex;
						align-items: center;
						gap: 20rpx;

						.sign-img {
							width: 40rpx;
							height: 40rpx;

							image {
								width: 100%;
							}

						}
					}
				}


			}

			.certificateInfo {
				width: 90%;
				padding: 30rpx;
				box-sizing: border-box;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				gap: 20rpx;

				.Info-btn {
					margin-top: 40rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;

					.look-btn {
						padding: 20rpx 50rpx;
						background-color: #32b9b4;
						color: #fff;
						border-radius: 20rpx;
					}

					.download-btn {
						padding: 20rpx 50rpx;
						background-color: #e2c87d;
						color: #5e3603;
						border-radius: 20rpx;
					}
				}
			}


		}
	}
</style>